אחרי שלמדנו ליצור תבניות קצת יותר מתקדמות, נילמד ליצור תבניות מתקדמות אף יותר.
הפרק הקודם
Twig - יוצרים תבניות מתקדמות\פשוטות
מה במדריך?
בחלק הקודם למדנו ליצור תבניות מתקדמות קצת יותר, בחלק זה נלמד לשפר אותם ולעשות אותם מתקדמות אף יותר ממה שהיו.
בפרק זה נלמד על ה Layout - extends, על ה blockים ותנאי ה IF.
שימו לב שהתוצאות בפרק זה היו קרובות לתוצאה בפרק הקודם אך הכתיבה שלהם תהיה יותר פשוטה ומובנת.
מתחילים בתזכורת
בואו ניזכר במה שעשינו בפרק הקודם,
בפרק הקודם יצרנו דף\דפים שיש להם את אותו חלק עליון ואותו חלק תחתון - Header & Footer.
קודים
{% include 'Layout/header.html' %}
Hello {{ world }}!
{% include 'Layout/footer.html' %}
Hello {{ world }}!
{% include 'Layout/footer.html' %}
<html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
</body>
</html>
</html>
הקדמה
כמו שאמרתי כבר בהתחלה בפרק זה נלמד ליצור תבניות מתקדמות וטובות יותר מבחינת תחביר,
בפרק זה נלמד ליצור בעצם Layout - תסדיר(תסדיר הינו דבר אשר חוזר על עצמו באופן סידרתי).
בשביל ליצור את זה נשתמש ב extends - מרחיבים, וכמובן שנלמד על ב blockים - בלוקים.
בואו ניראה כיצד אנו עושים זות בתמונה, ונראה מה השוני מהמדריך הקודם,
פרק קודם:
בפרק הזה:
Extends - הרחבות
תאג ה Extends משמש על מנת להרחיב תבניות בתבניות אחרות,
בואו נגדיר את תבנית בסיס ניקרא לה layout.html ובא ה html הפשוט הבא:
<html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
</body>
</html>
<head>
<title>Twig guide - by RaFaeL</title>
</head>
<body>
</body>
</html>
(שימרו אותה בתקיה layout!).
עכשיו יש לנו דף פשוט אבל לא הגדרנו את הבלוקים - לאן התוכן של כל עמוד יכנס?
נעשה את זה בעזרת תאג ה block.
כאשר התבנית ירושה מתבנית אחרת אנו צריכים להגדיר בלוקים - ריבועים שבהם יופיע המידע של העמוד שלנו.
דוגמא לlayout.html עם הבלוקים:
<html>
<head>
<title>Twig guide - by RaFaeL - {% block title %}{% endblock %}</title>
{% block css %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
<head>
<title>Twig guide - by RaFaeL - {% block title %}{% endblock %}</title>
{% block css %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
עכשיו כל מה שנותר לעשות זה לבנות עמוד מתאים, לא ככה?
העמוד המתאים - hello.html
עכשיו אחרי שבנינו עמוד עם בלוקים אנחנו צריכים לבנות תבנית משופרת שתירוש מהתבנית עם הבלוקים ותמלא את החלל שהבלוקים השאירו.
דוגמא לעמוד שמתאים לירושה מהlayout:
{% extends "Layout/layout.html" %}
{% block title %}Hello {{ world }} page{% endblock %}
{% block css %}
<style type="text/css">
.important { color: red; }
</style>
{% endblock %}
{% block body %}
<span class="important">
Hello {{ world }}!
</span>
{% endblock %}
{% block title %}Hello {{ world }} page{% endblock %}
{% block css %}
<style type="text/css">
.important { color: red; }
</style>
{% endblock %}
{% block body %}
<span class="important">
Hello {{ world }}!
</span>
{% endblock %}
כעת מילינו את החלל הריק של הבלוקים, התוצאה: Hello World!
קוד מקור:
<html>
<head>
<title>Twig guide - by RaFaeL - Hello World page</title>
<style type="text/css">
.important { color: red; }
</style>
</head>
<body>
<span class="important">
Hello World!
</span>
</body>
</html>
<head>
<title>Twig guide - by RaFaeL - Hello World page</title>
<style type="text/css">
.important { color: red; }
</style>
</head>
<body>
<span class="important">
Hello World!
</span>
</body>
</html>
הרחבות שונות לבלוקים - blockים
אחרי שלמדנו את הבסיס של הבלוקים בואו נרחיב אותם ונלמד עליהם עוד קצת,
שימוש בבלוק כמה פעמים בlayout
לפעמים צריכים להשתמש בבלוק מספר פעמים בlayout לודגמא לשים כותרת עמוד מתאימה וגם להוסיף את זה ל keywords ואולי גם לdescription,
לשם כך יש את הפונקציה block וכך היא ניראת:
{{ block('title') }}
דוגמא לקוד עם הפונקציה הנ"ל:
<html>
<head>
<title>Twig guide - by RaFaeL - {% block title %}{% endblock %}</title>
<meta name="keywords" content="keywords,{{ block('title') }}" />
<meta name="description" content="description,{{ block('title') }}" />
{% block css %}{% endblock %}
</head>
<body>
<h1>{{ block('title') }}</h1><br />
{% block body %}{% endblock %}
</body>
</html>
<head>
<title>Twig guide - by RaFaeL - {% block title %}{% endblock %}</title>
<meta name="keywords" content="keywords,{{ block('title') }}" />
<meta name="description" content="description,{{ block('title') }}" />
{% block css %}{% endblock %}
</head>
<body>
<h1>{{ block('title') }}</h1><br />
{% block body %}{% endblock %}
</body>
</html>
וזה הקוד מקור המתקבל:
<html>
<head>
<title>Twig guide - by RaFaeL - Hello World page</title>
<meta name="keywords" content="keywords,Hello World page" />
<meta name="description" content="description,Hello World page" />
<style type="text/css">
.important { color: red; }
</style>
</head>
<body>
<h1>Hello World page</h1><br />
<span class="important">
Hello World!
</span>
</body>
</html>
<head>
<title>Twig guide - by RaFaeL - Hello World page</title>
<meta name="keywords" content="keywords,Hello World page" />
<meta name="description" content="description,Hello World page" />
<style type="text/css">
.important { color: red; }
</style>
</head>
<body>
<h1>Hello World page</h1><br />
<span class="important">
Hello World!
</span>
</body>
</html>
תוספת לבלוק במקום שינוי מוחלט
לפעמים אתם כותבים בלוק עם ערך ברירת מחדל, אבל אם אנחנו רוצים שזה יהיה ערך קבוע שאליו יתווספו דברים?
לשם כך יש את הפונקציה parent, תחביר:
{{ parent() }}
parent = מקור, דוגמא לשימוש בקוד:
{% block css %}
<style type="text/css">
.important { color: red; }
</style>
{{ parent() }}
{% endblock %}
<style type="text/css">
.important { color: red; }
</style>
{{ parent() }}
{% endblock %}
וזה הקוד המקורי של הבלוק:
{% block css %}
<style type="text/css">
.test { color: blue; }
</style>
{% endblock %}
<style type="text/css">
.test { color: blue; }
</style>
{% endblock %}
שימו לב שאת הפונקציה אתם שמים בכל מקום בבלוק שבא לכם ששם יוצג הקוד המקורי של הבלוק.
תנאי IF
גם כאן כמו ב PHP המקורי ניתן לעשות תנאים בתוך התבנית, לשם כך יש את התאג if.
לדוגמא נגדיר משתנה בתבנית בשם important השערך שלו true:
{% set important = true %}
וכעת נעשה בדיקה אם הוא שווה ל ture(אמת) אז ה span שלנו יהיה עם class ששווה ל important ואם הוא לא שווה אז הוא היה span רגיל, דוגמא:
{% extends "Layout/layout.html" %}
{% block title %}Hello {{ world }} page{% endblock %}
{% block css %}
<style type="text/css">
.important { color: red; }
</style>
{{ parent() }}
{% endblock %}
{% block body %}
{% set important = true %}
<span{% if important == true %} class="important"{% endif %}>
Hello {{ world }}!
</span>
{% endblock %}
{% block title %}Hello {{ world }} page{% endblock %}
{% block css %}
<style type="text/css">
.important { color: red; }
</style>
{{ parent() }}
{% endblock %}
{% block body %}
{% set important = true %}
<span{% if important == true %} class="important"{% endif %}>
Hello {{ world }}!
</span>
{% endblock %}
התחביר של הIF:
{% if (condition) %}
{% else if (condition) %}
{% else %}
{% endif %}
{% else if (condition) %}
{% else %}
{% endif %}
עכשיו נסו לשחק עם המשתנה important, שנו את ערכו ל false:
{% set important = false %}
תריצו את הדף ותראו שה class נעלם!
<span> no <span class="important">
במדריך הבא
* אופרטורים
* עוד קצת על ה IF
* לולאות פשוטות
תגובות לכתבה:
תודה רבה !